<template>
  <div class="bg-layer" v-show="showFlag">
     <div class="big-img-dialog">
        <div style="position: relative;">
        <!-- 关闭按钮 -->
        <img src="../images/close_icon.png" class="close-icon" @click="showFlag=false">

        <p class="dialog-title font16">{{food.name}}</p>
        <img :src="food.imgUrl" class="dish-big" v-if="food.imgUrl">
        <img src="../images/nodish.png" class="dish-big" v-if="!food.imgUrl">

         <div class="attr-list" v-if="food.attribute">
              <label v-for="(attr,index) in food.attribute">
                  <input type="radio" :value="attr.itemId" v-model="food.selAttr">
                  <span>{{attr.dishesPropertyItem.itemName}}</span>
              </label>
          </div>

        <div class="select-again">
          <div class="float-left" style="line-height:39px;">
            <p style="font-size: 22px;color: #f96132;">￥{{selAttrPrice}}</p>
          </div>
          <div class="float-right">
              <numberControl :food="selFood"></numberControl>
          </div>
        </div>
        </div>
      </div>
  </div>
</template>
<script>
  import numberControl from './numberControl'
  export default {
     props:{
      food: {
        type: Object,
        default:{}
      },
    },
    data() {
      return {
        showFlag: false,
        selArr:this.food.attribute
      };
    },
    watch:{
      food:{
        handler: function (val, oldVal) {
          let count=0;
          if(val.attribute){
            val.attribute.forEach(function(v) {
              if(v.count){
                count+=v.count;
              }
            });
            this.$set(val,'count',count);
          }
        },
        deep: true
      }
    },
    computed:{
      selAttrPrice(){
        const _this=this;
        if(_this.food.attribute){
          let price = 0;
          _this.food.attribute.forEach(function(val){
            if(val.itemId==_this.food.selAttr){
              return price = val.money;
            }
          });
          return price;
        }else{
          return _this.food.price
        }
      },
      selFood(){
        const _this = this;
        if(_this.food.attribute){
          let sel = _this.food.attribute[0];
          _this.food.attribute.forEach(function(val,index){
            if(val.itemId==_this.food.selAttr){
              sel= _this.food.attribute[index];
            }
          });
          return sel;
        }else{
          return _this.food;
        }
      }
    },
    components:{
      numberControl
    }
  }
</script>
<style lang="less">
  .attr-list {
    margin-top:20px;
    height: 62px;
    overflow-y:scroll;
    -webkit-overflow-scrolling : touch;

      label {
        display: inline-block;
        margin: 0 5px 5px 0;
        text-align: center;
        span {
          pointer-events: none;
        }
        input {
          display: none;
          &:checked+span {
            background: #11bab3;
            border-color: #11bab3;
            color: #fff;
          }
        }
        span {
          padding: 5px 10px;
          display: block;
          border: 1px solid #ccc;
          border-radius: 5px;
          font-size: 12px
        }
      }
    }

  .bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
  }

  .big-img-dialog {
    width: 80%;
    background: white;
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 1010;
    border-radius: 3px;
    margin-left: -40%;
    padding: 12px;

      .dish-big {
          width: 100%;
          height: 280px;
          display: block;
          margin-top: 10px;
      }

      ul {
        margin-top: 10px;

        li {
            float: left;
            padding: 5px 30px;
            border:1px solid #ddd;
            color: #666;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 3px;
            font-size: 12px;
        }

        .current {
          background:#11bbb4;
          border:1px solid #11bbb4;
          color:white;
        }
      }

      .select-again {
        clear: both;
        height: 39px;
      }

      .close-icon {
        width: 34px;
        height: 34px;
        position: absolute;
        right: -21px;
        top: -32px;
        z-index: 1010;
      }
}

</style>
